<template>
    <!-- 角色权限页面 -->
    <div class="auth-defend">
        <div class="title">
            当前角色为：{{$route.query.roleName}}，属性为：{{ roleType }}
        </div>
        <div class="auth-list">
            <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="menuCode"
                border
                default-expand-all
                ref="table"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
                <el-table-column
                    prop="meta.title"
                    label="模块菜单名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="funcList"
                    label="功能项">
                    <template slot-scope="scope">
                        <el-checkbox 
                            v-if="scope.row.funcList.allSysFunc && scope.row.funcList.allSysFunc.length"
                            :indeterminate="scope.row.funcList.isIndeterminate" 
                            v-model.trim.trim="scope.row.funcList.checkAll"   
                            @change="handleCheckAllChange(scope.row,scope.row.menuCode)"
                        >全选</el-checkbox>
                        <el-checkbox-group 
                            v-model.trim.trim="scope.row.funcList.sysFunc"  
                            @change="handleCheckedItemChange(scope.row,scope.row.menuCode)"
                        >
                            <el-checkbox v-for="(val,i) of scope.row.funcList.allSysFunc" :label="val" :value="val" :key="i">{{val.funcName}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="btn-box">
                <el-button type="info" @click="close" size="small">取消</el-button>
                <el-button type="primary" size="small" @click="commitFn">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { getRoleMenus, updRoleMenus } from "@/api/system/role";
export default {
    data(){
        return{
            tableData:[],
            // 查询条件
            queryParams: {
                roleCode: this.$route.query.roleCode,
                // parentCode: localStorage.getItem('parentCode')
                parentCode: '-1'
            },
            // 角色类型
            roleType: '',
        }
    },
    watch:{
        $route(){
            this.queryParams.roleCode = this.$route.query.roleCode;
            this.roleType = this.$route.query.roleType == 0 ? '系统管理属性' : '业务操作属性';
        }
    },
    activated(){
        this.roleType = this.$route.query.roleType == 0 ? '系统管理属性' : '业务操作属性';
        this.$nextTick(()=>{
            this.listRole();
        })
    },
    methods:{
        /** 权限列表 */
        listRole(){
            let param = {
                parameter: this.queryParams
            }
            getRoleMenus(param).then((res) => {
                if(res.status == 200){
                    this.formatData(res.data.menus) ;
                }
            })
        },
        /** 格式化数据 */
        formatData(tableData){
            tableData.forEach(item=>{
                if(item.leaf == 1){
                    item.funcList = {
                        checkAll: item.sysFunc.length == item.allSysFunc.length, 
                        isIndeterminate: item.sysFunc.length != 0 && item.sysFunc.length != item.allSysFunc.length,
                        sysFunc: item.sysFunc, 
                        allSysFunc: item.allSysFunc
                    }
                }else{
                    item.funcList = {}
                }
                if( item.children && item.children.length > 0 ){
                    this.formatData( item.children )
                }
            })
            this.tableData = tableData;
        },
        /**
         * 全选按钮选中
         */
        handleCheckAllChange(row,menuCode) {
            this.changeCheckedStatus(this.tableData,menuCode);
        },
        /**
         * 单个按钮选中
         */
        handleCheckedItemChange(val,menuCode) {
            let checkedCount = val.funcList.sysFunc.length;
            this.menusCheckedFn( this.tableData, menuCode, checkedCount, val);
        },
        /**
         * 全选按钮点击事件
         */
        changeCheckedStatus( tableData, menuCode ){
            tableData.forEach( item => {
                if( item.menuCode == menuCode ){
                    item.funcList.sysFunc = item.funcList.checkAll ? item.funcList.allSysFunc : [];
                    item.funcList.isIndeterminate = false;
                }else if( item.children && item.children.length > 0 ){
                    this.changeCheckedStatus( item.children , menuCode)
                }
            })

        },
        /**
         * 功能权限点击事件
         */
        menusCheckedFn( tableData, menuCode, count, val ){
            tableData.forEach( item => {
                if( item.menuCode == menuCode ){
                    item.funcList.checkAll = count === item.funcList.allSysFunc.length;
                    item.funcList.isIndeterminate = count > 0 && count < item.funcList.allSysFunc.length;
                }else if( item.children && item.children.length > 0 ){
                    this.menusCheckedFn( item.children , menuCode ,count)
                }
            })
        },
        /** 提交事件 */
        commitFn(){
            let param = {
                parameter:{
                    roleCode: this.$route.query.roleCode,
                    roleAuthList: []
                }
            };
            this.formatParam(this.tableData,param);
            updRoleMenus(param,this.$route.query.childCode).then( res => {
                if( res.status ==  200 ){
                    this.msgSuccess('修改成功');
                }else if ( res.status == 101 ){
                    this.msgError(res.errors[0].message);
                }
            })
            console.log(param,this.$route.query)
        },
        /** 格式化参数 */
        formatParam(tableData,param){
            tableData.forEach( item =>{
                if( item.leaf == 1 ){
                    let obj = {};
                    obj.pageId = item.pageId;
                    obj.menuCode = item.menuCode;
                    obj.funcIds = [];
                    item.funcList.sysFunc.forEach(val => {
                        obj.funcIds.push(val.funcId);
                    })
                    obj.funcIds = obj.funcIds.join(',');
                    param.parameter.roleAuthList.push(obj);
                }
                if( item.children && item.children.length > 0 ){
                    this.formatParam( item.children, param )
                }
            })
        },
        /** 关闭当前页面 */
        close(){
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="scss" scoped>
.auth-defend{
    .title{
        font-size: 16px;
        color: #333;
        margin-bottom: 30px;
        text-align: left;
    }
    height: 100%;
    padding: 20px;
    .auth-list{
        height: 90%;
        .el-table{
            .cell{
                display: flex;
            }
        }
        .btn-box{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 20px;
            .el-button{
                width: 80px;
                margin-left: 30px;
            }
        }
    }
}
</style>
<style lang="scss">
.auth-defend{
    .el-table{
        .cell{
            display: flex;
        }
        .el-checkbox{
            line-height: 40px;
            &:last-of-type{
                margin-right: 30px;
            }
        }
    }
}
</style>